<template>
	<view style="background-color: #f7f7f8;">
		<!-- 首页顶部 -->
		<view class="dinbu">
			<text>首页</text>
			<u-icon v-if="a==1" name="scan" size="30" color="#fff"></u-icon>
		</view>

		<!-- 首页图片 -->
		<view style="width: 100%;text-align: center;padding: 60rpx 0;">
			<image src="../../static/4.jpg" style="width: 90%;height: 300rpx;border-radius: 20rpx;" mode="aspectFill">
			</image>
		</view>

		<!-- 首页功能点 -->
		<view class="list">
			<view @click="topage(item.name)" class="list_item" v-for="item in list[a]">
				<image :src="item.img" mode="aspectFill" style="width: 80rpx;height: 80rpx;margin-bottom: 20rpx;">
				</image>
				<text>{{item.name}}</text>
			</view>
		</view>

		<!-- 访问提醒 -->
		<view style="padding: 60rpx 30rpx 10rpx 30rpx;">
			<text style="line-height: 70rpx;">访问提醒</text>
			<view v-for="item in fangwenlist" class="fangwenlist">
				<image :src="item.img" mode="aspectFill" style="width: 100rpx;height: 100rpx;margin-right: 20rpx;">
				</image>
				<view
					style="font-size: 20rpx;line-height: 60rpx;display: flex;justify-content: space-between;width: 80%;align-items: center;">
					<view class="">
						<text
							style="font-size: 35rpx;font-weight: bold;">{{$u.timeFormat(item.time, 'yyyy年mm月dd日 hh:MM')}}</text><br />
						<text>{{item.bumen}}<br />{{item.username}}</text>
					</view>
					<view style="display: flex;justify-content: flex-end;">
						<u-badge style="box-shadow: 5rpx 5rpx 10rpx #b9b9b9;margin-bottom: 150rpx;" type="warning"
							bgColor="#fff849" color="#000" shape="horn" :value="item.num"></u-badge>
						<view style="display: flex;align-items: center;">
							<u-badge :isDot="true" type="error"></u-badge>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				a: 0,
				list: [
					[{
						name: '访客登记',
						img: '../../static/guiji.png'
					}, {
						name: '最新邀请',
						img: '../../static/shenpi.png'
					}, {
						name: '访问记录',
						img: '../../static/jilu.png'
					}],
					[{
						name: '创建邀请',
						img: '../../static/chuangjian.png'
					}, {
						name: '邀请记录',
						img: '../../static/jilu.png'
					}, {
						name: '审批记录',
						img: '../../static/shenpi.png'
					}, {
						name: '访客轨迹',
						img: '../../static/guiji.png'
					}]
				],
				fangwenlist: [{
					img: '../../static/guiji.png',
					time: Number(new Date()),
					bumen: '研发部',
					username: '马东',
					num: 2
				}, {
					img: '../../static/guiji.png',
					time: Number(new Date()),
					bumen: '研发部',
					username: '马东',
					num: 2
				}]
			}
		},
		onLoad() {

		},
		onShow() {
			this.a = uni.getStorageSync('a')
		},
		methods: {
			// 功能页跳转
			topage(name) {
				switch (name) {
					case '访客登记':
						uni.navigateTo({
							url: '../personalHomePage/visitorRegistration/visitorRegistration'
						})
						break;
					case '最新邀请':
						uni.navigateTo({
							url: '../personalHomePage/latestInvitation/latestInvitation'
						})
						break;
					case '访问记录':
						uni.navigateTo({
							url: '../personalHomePage/accessRecord/accessRecord'
						})
						break;
					case '创建邀请':
						uni.navigateTo({
							url: '../enterpriseHomePage/invitation/createInvitation'
						})
						break;
					case '邀请记录':
						uni.navigateTo({
							url: '../enterpriseHomePage/invitation/invitationRecord'
						})
						break;
					case '审批记录':
						uni.navigateTo({
							url: '../enterpriseHomePage/approval/approvalRecord'
						})
						break;
					case '访客轨迹':
						uni.navigateTo({
							url: '../enterpriseHomePage/visitorTrack/accessRecord'
						})
						break;
				}
			}
		}
	}
</script>

<style>
	.fangwenlist {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.dinbu {
		display: flex;
		justify-content: space-between;
		background-color: #2984f8;
		align-items: center;
		height: 150rpx;
		color: #fff;
		padding: 0 20rpx;
	}

	.list {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0 40rpx;
	}

	.list_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 30rpx;
	}
</style>
